<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-ua-compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width,initial-scale=1.0">
		<title></title>
	</head>
	<style>
		.square{
			
			margin:20px;
			width:200px;
			height:200px;
			background-color:red;
		}
		.rectangle{
			
			margin:20px;
			width:400px;
			height:200px;
			background-color:red;
		}
		.isosceles-triangle{
			margin:50px;
			width:0;	
			height:0;
			border:100px solid blue;
			border-color:transparent transparent yellow transparent;
			border-top-style:none;
		}
		.equilateral-triangle{
		margin:50px;
			width:0;
			height:0;
			border-left: 100px solid transparent;
			border-top: 0 solid transparent;
			border-right: 100px solid transparent;
			border-bottom: 173px solid red;
		}
		.right-angled-trangle{
		margin:50px;
			width:0;
			height:0;
			border:100px solid #000;
			border-color:transparent transparent pink pink;
		}
		.trapeoid{
		margin:50px;
			width:100px;
			border-bottom:100px solid green;
			border-left:50px solid transparent;
			border-right:50px solid transparent;
		
		}
		.abnormity{
		margin:50px;
			width:0;
			height:0;
			border-top:187px solid transparent;
			border-right:265px solid transparent;
			border-bottom:116px solid red;
			border-left: 136px solid red;

		}
	</style>
	<body>
		<div class='square'>正方形</div>
		<div class='rectangle'>长方形</div>
		<div class='isosceles-triangle'>等腰三角形</div>
		<div class='equilateral-triangle'>等边三角形</div>
		<div class='right-angled-trangle'>直角三角形</div>
		<div class='trapeoid'>梯形</div>
		<div class='abnormity'>异形</div>
	</body>
</html>
